<template>
  <!-- 员工管理页 -->
  <div class="waiter">
    <el-container>
      <!-- 头部展示区 -->
      <el-header class="Header">
        <!-- 添加按钮 -->
        <el-button type="primary" @click="addWaiter">添加</el-button>
        <!-- 用户名输入框 -->
        <el-input
          placeholder="请输入用户名"
          width="25px"
          v-model="waiterName"
          clearable
          style="width: 240px"
        >
        </el-input>
        <!-- 状态下拉框 -->
        <el-select v-model="waiterStatus" clearable placeholder="请选择状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
        <!-- 查询按钮 -->
        <el-button type="primary" @click="queryWaiter">查询</el-button>
      </el-header>
      <!-- 表格内容显示区 -->
      <el-main class="content">
        <el-table :data="waiterData" style="width: 100%">
          <!-- 编号 -->
          <el-table-column fixed prop="id" label="编号" align="center">
          </el-table-column>
          <!-- 用户名 -->
          <el-table-column prop="username" label="用户名" align="center">
          </el-table-column>
          <!-- 姓名 -->
          <el-table-column prop="realname" label="姓名" align="center">
          </el-table-column>
          <!-- 手机号 -->
          <el-table-column prop="telephone" label="手机号" align="center">
          </el-table-column>
          <!-- 性别 -->
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              <i
                class="el-icon-male"
                v-if="scope.row.gender == '男'|| scope.row.gender == 'male'"
                style="color: blue"
              ></i>
              <i class="el-icon-female" v-if="scope.row.gender == '女' || scope.row.gender == 'female'" style="color: pink"></i>
            </template>
          </el-table-column>
          <!-- 状态 -->
          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column prop="zip" label="操作" align="center">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button type="text" size="small" @click="editWaiter(scope.row)">编辑</el-button>
              <!-- 删除 -->
              <el-button @click="delData(scope.row.id)" type="text" size="small" style="color:red">删除</el-button>
              <!-- 详情 -->
              <el-button type="text" size="small" style="color:blue" @click="waiter_Data(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页展示区 -->
      <el-footer class="Footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>
      <!-- 模态框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="dialogClose">
        <!-- 表单区域 -->
        <el-form :model="waiterForm" :rules="rules" ref="waiter_form">
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="waiterForm.username"></el-input>
          </el-form-item>
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="waiterForm.realname"></el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model.number="waiterForm.telephone"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input v-model="waiterForm.password"></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="waiterForm.gender" v-if="waiterForm.gender == 'male'||waiterForm.gender == 'female'">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
            <el-radio-group v-model="waiterForm.gender" v-else>
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女 </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="状态" prop="status" v-if="waiterForm.id">
            <el-radio-group v-model="waiterForm.status">
              <el-radio label="正常"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
        <!-- 模态框底部按钮区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      // 员工数据
      waiterData: [],
      // 员工用户名-输入框
      waiterName: "",
      // 员工状态-下拉框
      waiterStatus: "",
      // 当前页面-分页
      currentPage: 1,
      // 当前页面大小
      pageSize: 8,
      //员工数据总数
      total: 10,
      // 获取到的员工数据-查询按钮
      queryData: [],
      // 控制模态框的显示
      dialogVisible: false,
      // 模态框标题
      dialogTitle: "添加员工信息",
      waiter_form:'',
      // 表单对象
      waiterForm: {
        //  用户名
        username:"",
        // 姓名
        realname:"",
        // 手机号
        telephone:"",
        // 密码
        password:"",
        // 性别
        gender:"",
        //状态
        status:""
      },
      // 表单验证规则
      rules: {
         username:[
             { required: true, message: '请输入用户名', trigger: 'blur' },
         ],
         realname:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
         ],
         telephone:[
           { required: true, message: "请输入手机号码", trigger: "blur" },
           { type: "number", message: "手机号码必须是数字" },
         ],
         password:[
           { required: true, message: "请输入密码", trigger: "blur" },
         ],
         gender:[
            { required:false , message: '请选择性别', trigger: 'change' }
         ],
         status: [
            { required: true , trigger: 'change' }
          ],
      },
    };
  },
  computed: {},
  methods: {
    //跳转详情
    waiter_Data(id) {
      this.$router.push({
        path:'/admin/waiter/Details',
        query:{
              id
          }
      })
    },
    // 添加员工
    addWaiter() {
      // 清空表单对象
      this.waiterForm = {};
      // 显示模态框
       this.dialogTitle = "添加员工信息";
      this.dialogVisible = true;
    },
    //表单提交-确定按钮
    submitForm(){
     this.$refs['waiter_form'].validate(async (valid) => {
        if (valid) {
          this.waiterForm.roleId=1;
          // 发送表单验证的请求 提交表单对象
           let res;
          if(this.waiterForm.id){
            console.log(this.waiterForm.id);
              res = await post('/baseUser/saveOrUpdate', this.waiterForm)
          }else{
             res = await post('/baseUser/addUserWidthRole', this.waiterForm)
          }
          
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 重新刷新页面的数据
            this.getWaiterData();
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 编辑按钮
    editWaiter(row) {
      this.waiterForm={...row };
      console.log(this.waiterForm);
      this.waiterForm.telephone=parseInt(this.waiterForm.telephone);
      this.dialogTitle = "编辑员工信息";
      this.dialogVisible = true;
    },
    // 通过ID删除数据
   delData(id) {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
     let res = await get("/baseUser/deleteById", { id });
           if(res.status == 200){
          this.$message({
            type: 'success',
            message: res.message
          });
          this.getWaiterData();
           }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 获取员工信息 roleId=1时 为员工数据
    async getWaiterData() {
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        roleId: 1,
      };
      let res = await get("/baseUser/pageQuery", {
        ...data,
        ...this.queryData,
      });
      this.waiterData = res.data.list;
      this.total = res.data.total;
    },
    // 控制当前页面大小 控制显示信息的条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getWaiterData();
    },
    // 控制当前页面
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getWaiterData();
    },
    // 查询员工
    queryWaiter() {
      let data = {
        username: this.waiterName,
        status: this.waiterStatus,
      };
      for (const key in data) {
        //  格式化参数 如果参数为空将其删除
        if (!data[key]) {
          delete data[key];
        }
        //将拿到的参数data[key] 赋值给queryData
        this.queryData = data;
        // 将当前页面固定在第一页
        this.currentPage = 1;
        //重新刷新页面
        this.getWaiterData();
      }
    },
    dialogClose(){
      // 重置表单
      this.$refs['waiter_form'].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200);
    }
  },
  created() {
    //  自动获取员工信息
    this.getWaiterData();
  },
  mounted() {},
};
</script>
<style scoped>
.Footer {
  position: fixed;
  right: 25px;
  bottom: 10px;
}
</style>